<template>
  <div class="search">
    <!-- <h1>搜索 用网易云的搜索</h1> -->
    <div class="search-box">
      <i class="fa fa-search" aria-hidden="true"></i>
      <input type="text" placeholder="搜索歌曲、歌手、专辑" 
      v-model="keywords" 
      @keyup.enter="search"
      @input="inputting"
      >
      <i class="fa fa-times-circle" @click="clearWord" v-show="showdel"></i>
    </div>
    <hr>
    <!-- 搜索里面的动态组件切换 ,往组件component里面传入数据keywords，属性数据会被所有在这里渲染的组件接收 -->
    <component :is="showComponent" 
      :keywords="keywords"
      @changekeyword="changekeyword"
      @play="$emit('play',$event)"
      patht="/search"
    ></component>
  </div>
</template>
<script>
import SearchHot from '@/components/SearchHot.vue'
import SearchSug from '@/components/SearchSug.vue'
import SearchResult from '@/components/SearchResult.vue'
export default {
  name:'Search',
  data(){
    return {
      showComponent:SearchHot,  //初始显示SearchHot组件
      keywords:"",
      showdel:false,
    }
  },
  created(){
  },

  methods:{
    clearWord(){
      this.keywords="";
      this.showdel=false;
      this.showComponent=SearchHot;
    },
    search(){
      this.showComponent=SearchResult;
    },
    changekeyword(event){ //点击搜索提示,改变搜索关键字,并显示搜索结果组件
      this.showdel=true;
      this.keywords=event; //
      this.showComponent=SearchResult;
    },
    inputting(){
      //事件监听输入框,如果输入的关键字为空 就显示热搜SearchHot
      if(this.keywords==""){
        this.showComponent=SearchHot;
      }else{
        this.showdel=true;  //输入框不为空时显示清除按钮
        this.showComponent=SearchSug;
      }
    },
  },

  
  // beforeRouteEnter(to,from,next){
  //   next(vm=>{
  //     // console.log(vm.$refs.bottom);
  //     window.addEventListener("scroll",vm.$refs.bottom.windowScroll);
  //     console.log(vm.$refs.bottom.windowScroll);

  //   })
  // },
  // beforeRouteLeave(to,from,next){
  //     window.removeEventListener("scroll",this.$refs.bottom.windowScroll)
  //     next();
  // },

  // watch:{
  //   keywords(newValue){
  //     if(newValue=="" || newValue.length==0){
  //       this.showComponent=SearchHot;
  //     }else{
  //       this.showComponent=SearchSug;
  //     }
  //   }
  // },
  components:{
    SearchHot,
    SearchSug,
    SearchResult,
  }
}
</script>
<style lang="less" scoped>
.search-box{
  margin: 15px 10px;
  background-color: #ebecec;
  border-radius: 19px;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i.fa-search{
    color: #c9c9c9;
    font-size: 16px;
  }
  input{
    width: 100%;
    height: 25px;
    font-size: 14px;
    padding-left: 10px;
    outline: none;
    background-color: transparent;
    border: none;
    color: #333;
  }
  i.fa-times-circle{
    color: #c9c9c9;
    font-size: 16px;
  }
}
.search{
  hr{
    border: none;
    border-bottom: 1px solid #f0eeee;
  }
}
</style>